<template>
  <div class="webItem">
    <Form class="form-styl" :model="formInline" :label-width="80">
      <FormItem label="类型">
        <Select v-model="formInline.type">
          <Option value="HTML">HTML</Option>
          <Option value="CSS">CSS</Option>
          <Option value="Javascript">Javascript</Option>
          <Option value="Vue">Vue</Option>
          <Option value="React">React</Option>
        </Select>
      </FormItem>
      <FormItem label="标题">
        <Input v-model="formInline.title" placeholder="标题"></Input>
      </FormItem>
      <FormItem label="关键字">
        <Input v-model="formInline.keyword" placeholder="关键字"></Input>
      </FormItem>
      <FormItem label="附件">
        <Upload
          multiple
          action="//jsonplaceholder.typicode.com/posts/">
          <Button icon="ios-cloud-upload-outline">上传图片</Button>
        </Upload>
      </FormItem>
      <FormItem label="内容">
        <Button type="primary" size="small" @click="plusLi">新增</Button>
        <div class="plus-cont">
          <ul>
            <li v-for="(li,i) in ulsData" :key="i">
              <v-item :item="li" :index="i" @setUlsData="setUlsData" @deleUlsItem="deleUlsItem"></v-item>
            </li>
          </ul>
        </div>
      </FormItem>
      <FormItem class="tc">
        <Button type="primary" @click="submitCont">确定</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
  import vItem from '@/views/apps/vItem'
  export default {
    name: 'webItem',
    components: {
      vItem
    },
    data() {
      return {
        formInline: {
            type: '',
            title: '',
            keyword: '',
            files: ''
        },
        ulsData: []
      }
    },
    methods: {
        plusLi: function () {
            this.ulsData.push('')
        },
        setUlsData: function (data) {
            this.ulsData[data.key] = data.value
        },
        deleUlsItem: function(data) {
            this.ulsData.splice(data.key, 1)
        },
        submitCont: function () {
            let list = []
            for (let i of this.ulsData) {
                if (i) list.push('<li>' + i + '</li>')
            }
            let params = Object.assign({}, this.formInline, {list: list.join('')})
            console.log(params)
        }
    },
    created() {

    }
  }
</script>

<style  scoped lang="scss">
.webItem{
  padding: 20px 15px;
  max-width: 700px;
  margin: 0 auto;
  display: block;
  .form-styl{

    .tc{
      text-align: center;
    }
  }
}
</style>
